<template>
  <div class="container mt-4">
    <!-- 数据表格 -->
    <table class="table table-hover">
      <thead>
        <tr>
          <th>标题</th>
          <th>作者</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.title }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.status }}</td>
          <td>
            <button
              class="btn btn-primary btn-sm me-2"
              @click="showDetail(item)"
            >
              查看
            </button>
            <button
              class="btn btn-success btn-sm me-2"
              @click="handleApprove(item.id)"
            >
              同意
            </button>
            <button
              class="btn btn-danger btn-sm"
              @click="showRejectDialog(item.id)"
            >
              不通过
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 查看详情模态框 -->
    <div
      class="modal fade"
      :class="{ show: showDetailModal, 'd-block': showDetailModal }"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ selectedItem?.title }}</h5>
            <button
              type="button"
              class="btn-close"
              @click="closeDetailModal"
            ></button>
          </div>
          <div class="modal-body">
            {{ selectedItem?.content }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="showDetailModal" class="modal-backdrop fade show"></div>

    <!-- 拒绝原因模态框 -->
    <div
      class="modal fade"
      :class="{ show: showRejectModal, 'd-block': showRejectModal }"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">填写拒绝原因</h5>
            <button
              type="button"
              class="btn-close"
              @click="closeRejectModal"
            ></button>
          </div>
          <div class="modal-body">
            <textarea
              v-model="rejectReason"
              class="form-control"
              rows="3"
              placeholder="请输入拒绝原因..."
            ></textarea>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              @click="closeRejectModal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" @click="handleReject">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showRejectModal" class="modal-backdrop fade show"></div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

// 表格数据
const tableData = reactive([
  {
    id: 1,
    title: "文章A",
    author: "张三",
    status: "待审核",
    content: "这是文章A的详细内容...",
  },
  {
    id: 2,
    title: "文章B",
    author: "李四",
    status: "待审核",
    content: "这是文章B的详细内容...",
  },
]);

// 查看相关状态
const showDetailModal = ref(false);
const selectedItem = ref(null);

// 拒绝相关状态
const showRejectModal = ref(false);
const rejectReason = ref("");
let currentRejectId = null;

const showDetail = (item) => {
  selectedItem.value = item;
  showDetailModal.value = true;
};

const closeDetailModal = () => {
  showDetailModal.value = false;
};

const handleApprove = async (id) => {
  try {
    // 模拟API调用
    await mockApiCall(id, "approved");
    const item = tableData.find((i) => i.id === id);
    if (item) item.status = "已通过";
  } catch (error) {
    console.error("操作失败:", error);
  }
};

const showRejectDialog = (id) => {
  currentRejectId = id;
  showRejectModal.value = true;
};

const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    alert("请填写拒绝原因");
    return;
  }

  try {
    // 模拟API调用
    await mockApiCall(currentRejectId, "rejected", rejectReason.value);
    const item = tableData.find((i) => i.id === currentRejectId);
    if (item) {
      item.status = "已拒绝";
      item.rejectReason = rejectReason.value;
    }
    closeRejectModal();
  } catch (error) {
    console.error("操作失败:", error);
  }
};

const closeRejectModal = () => {
  showRejectModal.value = false;
  rejectReason.value = "";
  currentRejectId = null;
};

// 模拟API请求
const mockApiCall = (id, status, reason) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(
        `更新记录 ${id} 状态为 ${status}`,
        reason ? `原因：${reason}` : ""
      );
      resolve();
    }, 500);
  });
};
</script>

<style scoped>
.modal {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>